<template>
    <div class="Personal_Data">
        <div class="imgs">
            <img src="../../assets/img/mrtx.webp" alt="">
        </div>
        <div class="username">青木川川川</div>
        <div class="userinfo">这是下一个腾讯CEO</div>
        <div class="userclass">
            <span v-for="item of datas" :key="item">{{ item.labelClass }}</span>
        </div>
        <div class="csdn"><a href="https://blog.csdn.net/qmcqmcqmc?type=blog" class="csdn_a"><img
                    src="../../assets/img/20201230171705202.png" alt="" class="monkeys">出发go go go~~</a></div>
    </div>
</template>

<script setup>
import axios from '../../axios/index.js';
import { ref } from "vue"

let datas = ref([])
//初始化个人信息页的标签页
async function init(){
    let {data} = await axios.get("/class/init")
    datas.value = data
}
init()
</script>

<style scoped lang="less">
.Personal_Data {
    width: 4rem;
    position: relative;
    border-radius: .1rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: .01rem solid rgba(156, 189, 248, 1);

    >div {
        margin-top: .2rem;
    }

    .imgs {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 100%;
        border: 1px solid #333333;
        margin: .2rem auto 0;

        img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 100%;
        }
        @keyframes text {
            from{
                transform: rotate(0deg)
            }
            to{
                transform: rotate(360deg)
            }
        }
    }

    .username {
        text-align: center;
        font-size: .24rem;
        font-weight: 900;
    }

    .userinfo {
        text-align: center;
        font-size: .16rem;
        font-weight: 400;
    }

    .userclass {
        display: flex;
        flex-wrap: wrap;
        font-size: .14rem;

        span {
            display: inline-block;
            padding: .1rem .2rem;
            border-radius: .1rem;
            margin: .1rem;
            background-color: white;
            color: #999;
        }
    }

    .csdn {
        width: 2.8rem;
        height: .6rem;
        line-height: .6rem;
        text-align: center;
        font-size: .20rem;
        margin: .3rem auto;
        font-weight: 900;
        background-color: rgba(156, 189, 248, 0.6);
        border-radius: .08rem;
        color: white;
        border: .01rem solid rgba(156, 189, 248, 1);
        cursor: pointer;

        .monkeys {
            vertical-align: middle;
            width: .8rem;
            height: .5rem;
            position: relative;
            top: -0.02rem;
            margin-right: .1rem;
        }
    }
}</style>